<template>
	<view class="blind-box">
		<u-popup v-model="showPop" :mask-close-able="false" mode="center" border-radius="30">
			<view class="blind-box-contain flex-col col-center">
				<image class="close-icon" src="@/static/images/close.png" mode="widthFix" @click="closeFreeBlindBox">
				</image>
				<view class="content-box">
					<view id="integral" class="left-right free-goods" @click="handleClick('integral')">
						<image style="width: 100%; margin-bottom: 24%;" src="@/static/images/free-integral.png" mode="widthFix">
						</image>
						<text>免费旅游奖励</text>
					</view>
					<view id="goods" class="left-right free-integral" @click="handleClick('goods')">
						<image style="width: 100%; height: 120px; margin-bottom: 18rpx;" :src="freeGoodsList[0].image || ''"
							mode="widthFix"></image>
						<text>{{ freeGoodsList[0].name }}</text>
					</view>
				</view>
				<view id="submit" class="claim-btn" @tap="immediateClaim">立即领取</view>
			</view>
			<view class="title xl">
				<image style="height: 300rpx;" src="@/static/images/free-img.png" mode="heightFix"></image>
				<image style="height: 60rpx;" src="@/static/images/free-title.png" mode="heightFix"></image>
			</view>
		</u-popup>
		<u-popup v-model="showFreePop" mode="center" border-radius="30">
			<view class="travel-box">
				<view class="flex-box contact-information">
					<u-field v-model="phoneNum" label="联系方式" placeholder="请输入联系方式" :field-style="{flex: 1}">
					</u-field>
				</view>
				<view class="address">
					<u-field v-model="region" :disabled="true" label="所在地区" placeholder="请选择省、市、区" right-icon="arrow-right"
						@click="showRegion = true">
					</u-field>
				</view>
				<view class="submit" @click="travelSubmit">
					提交
				</view>
			</view>
		</u-popup>
		<u-select v-model="showRegion" :default-value="[defaultValue.province, defaultValue.city, defaultValue.district]" mode="mutil-column-auto" @confirm="regionChange" :list="lists"></u-select>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	import {
		getUserDrawZhi,
		getHandleRegion
	} from '@/api/user';
	import area from '@/utils/area'
	export default {
		name: "free-blind-box",
		props: {
			showPop: {
				type: Boolean,
				default: false,
			},
			userInfo: {
				type: Object,
				default: {}
			},
			freeGoodsList: {
				type: Array,
				default: []
			},
			closeFreeBlindBox: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				showFreePop: false,
				selectValue: '',
				region: '',
				addressObj: {
					contact: '',
					telephone: '',
					province: '',
					city: '',
					district: '',
					address: '',
					is_default: false
				},
				showRegion: false,
				lists: [],
				phoneNum: '',
				defaultValue: {
					province: 0,
					city: 0,
					district: 0
				}
			};
		},
		created() {
			const app = this;
			this.$nextTick(() => {
				this.lists = area
				console.log(this.lists, 'lists');
			})
			// 获取当前位置经纬度
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					app.getAddress(res.longitude, res.latitude)
				},
				fail: function(err) {
					uni.showToast({
						title: `${err}`
					})
				}
			});
		},
		methods: {
			...mapActions(['getUser']),
			getAddress(longitude, latitude) {
				var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
				var location = new TMap.LatLng(Number(latitude), Number(longitude));
				geocoder
					.getAddress({
						location: location
					}) // 将给定的坐标位置转换为地址
					.then((result) => {
						const address = result.result.address_component;
						const obj = {
							province: address.province.indexOf('市') !== -1 ? address.province.split('市')[0] : address.province,
							city: address.city,
							district: address.district,
						}
						this.region = obj.province + " " + obj.city + " " + obj.district
						// 根据坐标转换的城市获取到对应的ID
						getHandleRegion(obj).then(res => {
							this.lists.forEach((provinceItem, provinceIndex) => {
								// 印射对应的省份选项对应下标
								if (provinceItem.value === res.data.province) {
									this.defaultValue.province = provinceIndex;
									provinceItem.children.forEach((cityItem, cityIndex) => {
										// 印射对应的城市选项对应下标
										if (cityItem.value === res.data.city) {
											this.defaultValue.city = cityIndex;
											cityItem.children.forEach((districtItem, districtIndex) => {
												// 印射对应的区域选项对应下标
												if (districtItem.value === res.data.district) {
													this.defaultValue.district = districtIndex;
												}
											})
										}
									})
								}
							})
						})
					});
			},
			// 提交旅游信息
			travelSubmit() {
				if (this.phoneNum.trim() === '' || this.region.trim() === '') {
					uni.showToast({
						title: '请填入完整的信息',
						icon: 'error'
					})
					return
				}
				const obj = {
					phone: this.phoneNum,
					address: this.region,
				}
				getUserDrawZhi(obj).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '恭喜您！领取成功',
							icon: 'success',
							success: () => {
								this.showFreePop = false;
								this.closeFreeBlindBox();
								this.getUser();
							}
						})
					}
				})
			},
			regionChange(region) {
				console.log(region);
				this.addressObj.province_id = region[0].value;
				this.addressObj.city_id = region[1].value;
				this.addressObj.district_id = region[2].value;
				this.region = region[0].label + " " + region[1].label + " " + region[2].label
			},
			// 点击立即领取
			immediateClaim() {
				if (!this.selectValue) {
					uni.showToast({
						icon: 'none',
						title: '请先选择一款盲盒'
					})
					return;
				}
				if (this.userInfo.is_new2 === 1 && this.selectValue === 'integral') {
					uni.showToast({
						icon: 'none',
						title: '该奖励已领取'
					})
					return;
				} else if (this.userInfo.is_new === 1 && this.selectValue === 'goods') {
					uni.showToast({
						icon: 'none',
						title: '该奖励已领取'
					})
					return;
				}
				if (this.selectValue === 'goods') {
					uni.navigateTo({
						url: `/pages/goods_details/goods_details?id=${this.freeGoodsList[0].id}`
					})
					this.closeFreeBlindBox();
				} else {
					this.showFreePop = true;
				}
			},
			// 点击选择商品或积分
			handleClick(type) {
				const goods = document.getElementById('goods');
				const integral = document.getElementById('integral');
				const submit = document.getElementById('submit');
				submit.style = 'background: #fe5c56';
				if (type === 'goods') {
					integral.style = '';
					goods.style = 'border: 2px solid #f1605d';
					this.selectValue = 'goods';
					if (this.userInfo.is_new === 1) {
						submit.style = 'background: #aaa'
					}
				} else {
					goods.style = '';
					integral.style = 'border: 2px solid #f1605d';
					this.selectValue = 'integral';
					if (this.userInfo.is_new2 === 1) {
						submit.style = 'background: #aaa'
					}
				}
			},
		}
	}
</script>

<style scoped>
	.blind-box {}

	.blind-box-contain {
		position: relative;
		width: 80vw;
		padding-top: 50%;
		background: linear-gradient(to bottom, #ff9f9b, #fff 40%);
	}

	.close-icon {
		position: absolute;
		top: 6rpx;
		right: 6rpx;
		width: 46rpx;
		z-index: 9999;
	}

	.content-box {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		/* flex-wrap: wrap; */
	}

	.left-right {
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border: 2px solid #d3d3d3;
		border-radius: 20rpx;
		padding: 24rpx 32rpx 10rpx 32rpx;
	}

	.free-goods {
		margin-right: 10%;
	}

	.free-integral {}

	.title {
		position: absolute;
		top: -21%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		text-align: center;
		padding: 20rpx;
		z-index: 999;
	}

	.claim-btn {
		width: 80%;
		text-align: center;
		padding: 20rpx 0;
		background-color: #fe5c56;
		border-radius: 30px;
		color: #fff;
		margin: 10% 0;
	}

	.travel-box {
		background-color: #fff;
		width: 80vw;
		padding: 50rpx 20rpx;
		border-radius: 30rpx;
	}

	.flex-box {
		display: flex;
		justify-content: space-between;
	}

	.submit {
		width: 100%;
		background-color: #fe5c56;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
		padding: 10rpx 0;
	}

	/deep/ .u-mode-center-box {
		overflow: unset !important;
	}

	/deep/ .uni-scroll-view {
		overflow: unset !important;
	}
</style>